<template>
  <div class="text-container">
    <div data-text="Wish" class="text" >Wish</div>
    <div class="text" data-text="Love">Love</div>
    <div class="text" data-text="And">And</div>
    <div class="text" data-text="Peace">Peace</div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.divideTxt()
  },
  methods: {
    divideTxt() {
      var txts = document.querySelectorAll('.text')
      txts.forEach((txt) => {
        var letters = txt.textContent.split('')
        txt.textContent = ''
        letters.forEach((letter, i) => {
          var span = document.createElement('span')
          span.textContent = letter
          span.style.transitionDelay = `${i * 0.05}s`
          span.dataset.text = letter// 给每个span增加dataset，可以通过attr获取
          txt.append(span)
        })
      })
    }
  }
}
</script>

<style lang="scss">
  .text-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

    .text {
      display: flex;
      padding: 6px;
      overflow: hidden;
          span {
            position: relative;
            transition: 0.3s;

            &::before {
              position: absolute;
              content: attr(data-text);
              transform: translateY(130%);
            }
          }
          &:hover {
            span {
              transform: translateY(-130%);
            }
          }
    }
  }
</style>
